<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>商品评价</title>
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" href="../../css/aui-flex.css">
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="./css/commentDistrict.css">
    <script type="text/javascript" src="../../js/base.js"></script>
    <style type="text/css">
        .swiper {width: 100%;	height: 100%;	position: absolute;	bottom: 0;	left: 0;	background-color: #000;	overflow: hidden;	z-index: 10001;}
        .swiper .swiper-container {	width: 100%;	height: 100%;}
        .swiper .swiper-slide {overflow: hidden}
        /*.swiper > i {width: 1rem;	height: 1rem;	display: block;	padding: 1rem;	position: absolute;	top: 0;	right: 0;	z-index: 2;	border-radius: 50%;}*/
        /*.swiper > i::after, section.swiper > i::before {	content: '';	width: 1.2rem;	height: 0;	display: block;	border: 0.1rem solid #fff;	border-radius: 1rem;	position: absolute;	top: 0;	bottom: 0;	right: 0;	left: 0;	margin: auto;}*/
        /*.swiper > i::after {	transform: rotate(45deg);	-webkit-transform: rotate(45deg);}*/
        /*.swiper > i::before {transform: rotate(-45deg);	-webkit-transform: rotate(-45deg);}*/
        .swiper .delete {width: 2rem;bottom: 3rem;	z-index: 2;}
        .swiper .num-show{top:5rem;position: absolute;color: #FFFFFF;text-align: center; height: 4rem;width: 100%;}
        .aui-list textarea{
            margin:0 0;
            padding-right:0.5rem;
        }
        @media screen and (max-width:321px){
            .del-img{position: relative; float: right; height: 0; top: 1px; right: 20px;}
        }
        @media screen and (min-width:321px) and (max-width:376px){
            .del-img{position: relative; float: right; height: 0; top: 1px; right: 41px;}
        }
        @media screen and (min-width:377px) and (max-width:415px){
            .del-img{position: relative; float: right; height: 0; top: 1px; right: 49px;}
            .aui-dialog-footer{  border-top: 1px solid #ddd;background-size:100% 0 }
            .aui-dialog-footer>div:nth-child(1){  border-right: 1px solid #ddd;  }
        }
        @media screen and (min-width:416px) and (max-width:768px){
            .del-img{position: relative; float: right; height: 0; top: 1px; right: 149px;}
            .aui-dialog-footer{  border-top: 1px solid #ddd;background-size:100% 0 }
            .aui-dialog-footer>div:nth-child(1){  border-right: 1px solid #ddd;  }
        }
    </style>
</head>
<body id="commentBody">
<!--<header class="aui-bar aui-bar-nav aui-bar-top">-->
    <!--<a class="aui-pull-left aui-btn goBack" >-->
        <!--<span class="aui-iconfont aui-icon-left"></span>-->
    <!--</a>-->
    <!--<div class="aui-title">商品评价</div>-->
<!--</header>-->
<section id="app" v-cloak>
    <div v-if="navigator && navigator.onLine === true">
      <div v-for="childrenIndent,index in goodsIndentInfo.children" >
            <div class="aui-flex-col aui-flex-item-12 shop_img" style="background: #fff">
                    <div class="aui-flex-item-4 aui-padded-10">
                            <img v-bind:src="getImage(childrenIndent.goods_image)" style="height:4.5rem;border:1px solid #efefef">
                    </div>
                <div class="aui-flex-item-6 aui-margin-l-15 aui-padded-t-15 aui-padded-b-10">
                    <div  class="aui-font-size-16">{{childrenIndent.goods_name}}</div>
                    <div class="textCol">评分</div>

                    <div class="xingxing" v-bind:id="'starttwo_'+index">
                        <a v-for="nn in 5"  @click="clickXingXing(index,nn)" ><img style="height:1.1rem" src="../../icon/4-1/xingxing.png" v-bind:id="'star'+index+nn" /></a>
                    </div>
                    <div style="clear: both"></div>
                    <div class="textCol">您的评分：<span class="fenshu" >{{rank[index]}}</span> 分</div>

                        <!--<div  class="block clearfix starttwo" v-bind:id="'starttwo_'+index">-->
                            <!--<div  class="star_score"></div>-->
                            <!--<div class="textCol">您的评分：<span class="fenshu" v-bind:id="'startScore_'+index">5</span> 分</div>-->
                        <!--</div>-->
                </div>
            </div>
            <div style="clear:both"></div>
            <div class="aui-list aui-list-in aui-padded-l-10  district">
                 评价一下:<textarea   rows="20" cols="20" placeholder="这马桶盖帅惨了，功能齐全，领先全球" v-model="content[index]"></textarea>
            </div>
          <div class="aui-row aui-row-padded imgBg">

              <div class="aui-col-xs-4" v-for="ig,idx in updataImgs" v-if="ig.goodsid == childrenIndent.goods_id" >
                  <span class="bg-del del-img" v-on:click="delImage(idx,index)"><img src="../../images/del-img.png"></span>
                  <img  v-on:click="showClick(idx)"  v-bind:src="ig.imgPath" class="upload-img-show" />
              </div>

              <div class="aui-col-xs-4 li_input_file"  style="margin-left:0.5rem"  v-if="getImageLength(childrenIndent.goods_id)<9"  v-bind:id="childrenIndent.goods_id">
                  <input class="input_file" type="file" v-bind:id="'input_file'+childrenIndent.goods_id" v-on:change="addImage(event,this,childrenIndent.rec_id,childrenIndent.goods_id)">
              </div>
          </div>
      </div>
     <div class="niming">
        <div class="aui-pull-left aui-padded-l-15">
            匿名评论
        </div>
        <div class="aui-pull-right aui-padded-r-15" v-on:click="checkedBtn()" >
            <label class="check-radio"><input class="aui-radio" type="radio"  v-bind:checked="submitInfo" style="vertical-align:middle"></label>
        </div>
     </div>

     <div class="aui-btn aui-btn-info addBtn" v-on:click="addComment()">提交</div>
    </div>
    <!--图片放大 开始-->
    <section class="swiper" v-show="isShowSwiper" v-bind:transition="'expand'">
        <!--<i class="close" v-on:click="closeSwiper"></i>-->
        <div class="num-show fz14">{{bigImgIndx}}/{{updataImgs.length}}</div>
        <div class="swiper-container swiper-container-horizontal" id="mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="imgItem in updataImgs">
                    <div class="swiper-zoom-container">
                        <img class="center" v-bind:src="imgItem.imgPath" class="exampleImg" id="imgTest"  v-on:click="closeSwiper"/>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--图片放大 结束-->

    <div v-if="navigator && navigator.onLine === false" style="position:relative;" @click="goOnLine()">
        <div style="position:absolute;top:50%;left:50%;margin-top:8rem;margin-left: -3rem">
            <img src="../../icon/duanwang.png" alt="" style="width:6rem">
            <div class="aui-text-center">暂无网络</div>
        </div>

        <div  class="aui-text-center textCol" style="position:absolute;top:50%;left:50%;margin-top:15rem;margin-left: -86px">请连接网络后,点击刷新</div>
    </div>

</section>
<script type="text/javascript" src="../../js/zepto.min.js"></script>
<script type="text/javascript" src="../../js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="../../js/vue.min.js"></script>
<script type="text/javascript" src="../../js/swiper.min.js"></script>
<script type="text/javascript" src="../../js/api.js"></script>
<script type="text/javascript" src="../../js/aui-toast.js"></script>
<script type="text/javascript" src="../../js/aui-dialog.js"></script>
<script type="text/javascript" src="./js/commentDistrict.js" ></script>

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="../../js/weixin.js" ></script>

</body>
</html>